<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>artDialog</title>
<script src="../artDialog.source.js?skin=default"></script>
<script src="../plugins/iframeTools.source.js"></script>
<style>
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-family: 'Microsoft Yahei', Tahoma, Arial !important;
	font-family: '宋体', Tahoma, Arial;
	overflow: auto;
}

a {
	color: #27d;
	text-decoration: none;
}

#doc {
	widows: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

#sideBar {
	float: left;
	width: 228px;
	height: 100%;
	border-right: solid 1px #CCC;
	overflow: auto;
}

#main {
	margin-left: 230px;
	height: 100%;
}

#main iframe {
	width: 100%;
	height: 100%;
	border: none 0;
}

#main .tips {
	height: 2em;
	text-indent: 2em;
	line-height: 2em;
	color: #FFF;
	background: #030;
	font-weight: bold;
}

.sideBarWrap {
	padding: 10px;
}

#sideBar .content {
	margin: 5px;
}

#sideBar .content p {
	padding: 0;
	margin: 0;
	padding-bottom: 15px;
}

#sideBar .close {
	line-height: 2em;
	text-align: center;
	background: #F4F4F4;
	border-bottom: 1px solid #D8D8D8;
	color: #333;
}

#photo {
	text-align: center;
}

#photo img {
	margin-top: 15px;
}

#sideBar .nav {
	padding: 5px;
	margin: 15px 0;
	border: 1px solid #D8D8D8;
	background: #F4F4F4;
}

#sideBar .nav a {
	padding: 1px;
}

#sideBar .nav a:hover {
	background: #27d;
	color: #FFF;
	text-decoration: none;
}

#sideBar .btns {
	padding-bottom: 15px;
	text-align: center;
}

.gotop {
	position: absolute;
	right: 17px;
	bottom: 60px;
	z-index: 9;
}
</style>
</head>

<body>
	<div id="doc">
		<div id="sideBar">
			<div class="close">
				<a href="plugin.iframe.html" target="_blank">关闭框架查看</a>
			</div>
			<div class="sideBarWrap">
				<div id="photo"></div>
				<div class="nav">
					<a href="plugin.iframe.html#top" target="iframe">top</a> <a
						href="plugin.iframe.html#opener" target="iframe">opener</a> <a
						href="plugin.iframe.html#open" target="iframe">open</a> <a
						href="plugin.iframe.html#data" target="iframe">data</a> <a
						href="plugin.iframe.html#load" target="iframe">load</a> <a
						href="plugin.iframe.html#alert" target="iframe">alert</a> <a
						href="plugin.iframe.html#confirm" target="iframe">confirm</a> <a
						href="plugin.iframe.html#prompt" target="iframe">prompt</a> <a
						href="plugin.iframe.html#tips" target="iframe">tips</a>
				</div>
				<div class="btns">
					<button id="open">iframe弹出</button>
					<button id="move">移动</button>
					<button id="close">关闭</button>
				</div>
				<div class="content">
					<p>
						当前页面右侧是iframe套嵌的页面。对话框可以自由穿越框架进行展示，开发者几乎无需考虑层级关系即可进行跨框架操作DOM。</p>
					<p>
						artDialog如果要支持框架集穿越的话，需要用iframe页面套住框架集：<a
							href="iframe_frameset.html" target="_blank">见这里</a>
					</p>
				</div>
				<input disabled id="testInput" title="testInput" type="text" />
			</div>

		</div>
		<div id="main">
			<iframe id="iframe" name="iframe" src="plugin.iframe.html"></iframe>
			<a class="gotop" title="返回顶部" href="plugin.iframe.html#header"
				target="iframe">{top}</a>
		</div>
		<script type="text/javascript">
var test, iframe = document.getElementById('iframe');
document.getElementById('open').onclick = function(){
	var iframeWindow = iframe.contentWindow;
	test = iframeWindow.art.dialog({
		lock: true,
		content: '人品极度不稳定的时刻到了！'
	});
}
document.getElementById('move').onclick = function(){
	test && test.position('50%', '5%');
}
document.getElementById('close').onclick = function(){
	test && test.close();
	test = null;
}

var _hash = window.location.hash
if (_hash) {
	_hash = _hash.split('#')[1];
	if (_hash) iframe.src = 'plugin.iframe.html#' + _hash;
};
</script>
	</div>
</body>
</html>
